/**
 * UsedWidget module
 */
import React, {Component} from 'react';

import { connect } from 'dva';
import classnames from 'classnames';
import { bindActionCreators } from 'redux';
import widgetsActions from '../../../actions/Editor/widgets';
import tool from '../../../utils/tool';
import UsedTimeline from './UsedTimeline';

class UsedWidget extends Component {
    handleOnToggleShowStatus(){
        const {widget,toggleWidgetVisible} = this.props;
        let visible = widget.visible || false,
            id = widget.id;
        toggleWidgetVisible(id,!visible);
    }
    handleOnSelectWidget(){
        const {widget, selectWidget,widgets} = this.props;
        selectWidget(widget);
    }
    handleOnRemoveWidget(){
        const {widget, removeWidget} = this.props;
        removeWidget(widget);
    }
    render(){
        const {widget,timelines,timelineTool,showTimeline,selectedTimeline,selectedTimelineId,selectedWidgetIds} = this.props;
        var iconCheckedNode = "";
        if (widget.visible){
            iconCheckedNode = <div onClick={() => this.handleOnToggleShowStatus()} className="icon_eye_open"></div>
        } else {
            iconCheckedNode = <div onClick={() => this.handleOnToggleShowStatus()} className="icon_unchecked"></div>
        }
        
        widget.focus = (selectedWidgetIds.indexOf(widget.widget_id)> -1);

        return (
            <figure onClick={() => this.handleOnSelectWidget()} data-id={widget.id} id={"used-widget-id-" + widget.id + "-u"} className={"used-widget-item btg-used-widget wgt-action-" + widget.type + (widget.focus ? " focus " : "")}>
                <div className="used-widget-holder">
                    <div className="btn-visual">
                        {iconCheckedNode}
                    </div>
                    <div className="used-widget-content">
                        <i className={"widget-icon " + widget.icon_class}></i>
                        <span className="widget-label">{widget.label}</span>
                    </div>
                    <div className="used-widget-tool">
                        <a href="#" onClick={() => this.handleOnRemoveWidget()}>
                            <div className="icon-close"></div>
                        </a>
                    </div>
                </div>
                <div className="used-widget-timelines" style={{display:showTimeline ? "block" : "none",width:"1644px"}} data-widget-timelines>
                    <div className="widget-timelines-holder">
                    {
                        timelines.map(function (timeline, index){
                            return (
                                <UsedTimeline key={"used-widget-" + timeline.id + index} widget={widget} timeline={timeline} timelines={timelines} timelineTool ={timelineTool} selectedTimeline={selectedTimeline} selectedTimelineId={selectedTimelineId}/>
                            )
                        })
                    }
                    </div>
                </div>
            </figure>
        )
    }
}
const mapStateToProps = ({ editor, widgets}) => {
  const pageId = editor.selectedPageId;
  return {
      toggleWidgetVisible: editor.toggleWidgetVisible,
      selectWidget: editor.selectWidget,
      removeWidget: editor.removeWidget,
      widgets: widgets.filter(w => w.page_id === pageId),
      selectedWidgetIds: editor.selectedWidgetIds,
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators(widgetsActions, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(UsedWidget);
